<template>
  <div class="data-center-main" ref="dataCenter">
    <div class="leftpart" style="background-color: white">
      <div class="leftTop">
        <div class="titleFont">
          <img
            src="@/assets/images/data-center/icon-zichanshuju@3x.png"
            width="15px"
            alt=""
            style="margin-right: 10px"
          />
          资产数据概览
        </div>
        <div style="width: 100%; height: 100%; display: flex">
          <div
            style="
              width: 50%;
              height: 100%;
              border-right: 1px solid rgba(0, 0, 0, 0.06);
              padding: 10px;
            "
            id="chart0"
          ></div>
          <div
            style="width: 50%; height: 100%; padding: 10px"
            id="chart1"
          ></div>
        </div>
        <div
          style="
            position: absolute;
            right: 0px;
            top: 30px;
            color: #a0a0a0;
            font-size: 12px;
          "
        >
          资产投放总数：<span style="color: #165dff">{{
            mainData.deviceCount || 2
          }}</span>
        </div>
      </div>
      <div class="leftMid">
        <div
          style="height: 100%; width: 100%; border-radius: 10px"
          id="mapContainer"
        ></div>
        <div class="status">
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
            "
          >
            <div class="dot" style="background-color: #2262fb"></div>
            <div style="font-size: 16px; color: #8c8c8c">
              资产总量：{{ mainData.enableDeviceCount || 2 }}
            </div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
            "
          >
            <div class="dot" style="background-color: #67c23a"></div>
            <div style="font-size: 16px; color: #8c8c8c">
              当前在线：{{ mainData.enableDeviceCount || 2 }}
            </div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
            "
          >
            <div class="dot" style="background-color: #fa5050"></div>
            <div style="font-size: 16px; color: #8c8c8c">定位偏移：2</div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
            "
          >
            <div class="dot" style="background-color: #e6a23c"></div>
            <div style="font-size: 16px; color: #8c8c8c">设备锁停：0</div>
          </div>
          <!-- <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;">
            <div class="dot" style="background-color: #979797;"></div>
            <div style="font-size: 16px;color:#8C8C8C">设备停用：0</div>
          </div> -->
        </div>
      </div>
      <div class="leftBot" id="chart3"></div>
    </div>
    <div class="rightpart">
      <div class="rightOne">
        <div class="titleFont">
          <img
            src="@/assets/images/data-center/icon-chenliezhuangtai@3x.png"
            width="15px"
            alt=""
            style="margin-right: 10px"
          />
          陈列状态总览
        </div>
        <div
          style="
            height: 40%;
            padding: 10px;
            width: 100%;
            display: flex;
            justify-content: space-between;
          "
        >
          <div class="rightTop">
            <div style="display: flex; flex-direction: row; height: 80%">
              <img
                src="../../../assets/images/bottleB.png"
                alt=""
                style="height: 70%; margin-right: 10px"
              />
              <div
                style="display: flex; flex-direction: column; font-size: 20px"
              >
                <span
                  style="
                    font-family: HarmonyOS_Sans_SC_Regular;
                    font-size:calc(12vw * 100 / 1920); 
                    margin-bottom: 5px;
                  "
                  >本品陈列排面总数</span
                >
                <span
                  style="
                    font-family: HarmonyOS_Sans_SC_Regular;
                    font-size:calc(20vw * 100 / 1920); 
                  "
                  >55（瓶）</span
                >
              </div>
            </div>
            <div class="classifyFont">
              <span style="font-family: HarmonyOS_Sans_SC_Regular"
                >本品：18（种）</span
              >
              <span style="font-family: HarmonyOS_Sans_SC_Regular"
                >牌面占比：65%</span
              >
            </div>
          </div>
          <div class="rightTop">
            <div style="display: flex; flex-direction: row; height: 80%">
              <img
                src="../../../assets/images/bottleG.png"
                alt=""
                style="height: 70%; margin-right: 10px"
              />
              <div
                style="display: flex; flex-direction: column; font-size: 20px"
              >
                <span
                  style="
                    font-family: HarmonyOS_Sans_SC_Regular;
                    font-size:calc(12vw * 100 / 1920); 
                    margin-bottom: 5px;
                  "
                  >必铺品陈列排面总数</span
                >
                <span
                  style="
                    font-family: HarmonyOS_Sans_SC_Regular;
                    font-size:calc(20vw * 100 / 1920); 
                  "
                  >5（瓶）</span
                >
              </div>
            </div>
            <div class="classifyFont">
              <span style="font-family: HarmonyOS_Sans_SC_Regular"
                >必铺品：1（种）</span
              >
              <span style="font-family: HarmonyOS_Sans_SC_Regular"
                >牌面占比：6%</span
              >
            </div>
          </div>
          <div class="rightTop">
            <div style="display: flex; flex-direction: row; height: 80%">
              <img
                src="../../../assets/images/bottleY.png"
                alt=""
                style="height: 70%; margin-right: 10px"
              />
              <div
                style="display: flex; flex-direction: column; font-size: 20px"
              >
                <span
                  style="
                    font-family: HarmonyOS_Sans_SC_Regular;
                    font-size:calc(12vw * 100 / 1920); 
                    margin-bottom: 5px;
                  "
                  >新品陈列排面总数</span
                >
                <span
                  style="
                    font-family: HarmonyOS_Sans_SC_Regular;
                    font-size:calc(20vw * 100 / 1920); 
                  "
                  >25（瓶）</span
                >
              </div>
            </div>
            <div class="classifyFont">
              <span style="font-family: HarmonyOS_Sans_SC_Regular"
                >新品：6（种）</span
              >
              <span style="font-family: HarmonyOS_Sans_SC_Regular"
                >牌面占比：30%</span
              >
            </div>
          </div>
          <div class="rightTop">
            <div style="display: flex; flex-direction: row;height: 80%">
              <img
                src="../../../assets/images/bottleP.png"
                alt=""
                style="height: 70%; margin-right: 10px"
              />
              <div
                style="display: flex; flex-direction: column; font-size: 20px"
              >
                <span
                  style="
                    font-family: HarmonyOS_Sans_SC_Regular;
                    font-size:calc(12vw * 100 / 1920); 
                    margin-bottom: 5px;
                  "
                  >竟品陈列排面总数</span
                >
                <span
                  style="
                    font-family: HarmonyOS_Sans_SC_Regular;
                    font-size:calc(20vw * 100 / 1920); 
                  "
                  >25（瓶）</span
                >
              </div>
            </div>
            <div class="classifyFont">
              <span style="font-family: HarmonyOS_Sans_SC_Regular"
                >竞品：6（种）</span
              >
              <span style="font-family: HarmonyOS_Sans_SC_Regular"
                >牌面占比：30%</span
              >
            </div>
          </div>
        </div>

        <div style="width: 100%; height: 50%; position: relative">
          <!-- <div class="titleFont" style="margin-top: 10px">陈列不合格类型分析</div> -->
          <div
            style="
              position: absolute;
              right: 20px;
              top: 3px;
              color: #a0a0a0;
              font-size: 12px;
            "
          >
            不合格数量：<span style="color: red">{{
              mainData.deviceCount || 2
            }}</span>
          </div>
          <div style="width: 100%; height: 100%" id="chart4"></div>
        </div>
      </div>
      <div class="rightTwo">
        <div class="titleFont">
          <img
            src="@/assets/images/data-center/icon-shangpindongxiao@3x.png"
            width="15px"
            alt=""
            style="margin-right: 10px"
          />
          商品动销分析（昨日）
        </div>
        <img
          src="@/assets/images/data-center/icon-zanwushuju@2x.png"
          alt=""
          style="width: 10%; margin-left: 45%; margin-top: 5%"
        />
      </div>
      <div class="rightThree">
        <div class="titleFont" style="width: 100%">
          <img
            src="@/assets/images/data-center/icon-keliuqushi@3x.png"
            width="15px"
            alt=""
            style="margin-right: 10px"
          />
          客流趋势分析（次）
        </div>
        
        <el-select
          style="
            position: absolute;
            top: 15px;
            right: 10px;
            z-index: 100;
            width: 100px;
          "
          v-model="timeValue"
          size="mini"
          placeholder="请选择"
        >
          <el-option
            v-for="item in TimePeriod"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div style="width: 100%; height: 100%" id="chart5"></div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { format } from "echarts";

// import { getfactoryStatus } from '@/api/dataCenter/index'
// import { dataView, getDeviceInfo, dataHgqs, getTodayQualifiedDiviceCount } from '@/api/dataCenter/index'
window._AMapSecurityConfig = {
  securityJsCode: "591e46c8fe130643630bd7e02faf5c49",
};

const data = [
  { value: 600, name: "投放中" },
  { value: 600, name: "待分配" },
  { value: 400, name: "待投放" },
  { value: 400, name: "待检修" },
];

export default {
  components: {},
  data() {
    return {
      factoryStatusCount: {},
      map: "",
      // 检索方式集合
      searchWay_list: [
        { value: "经纬度", label: "经纬度" },
        { value: "基站信息", label: "基站信息" },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      mainData: [],
      //adcode
      adcode: [
        { adcode: "110000", name: "北京市" },
        { adcode: "120000", name: "天津市" },
        { adcode: "130000", name: "河北省" },
        { adcode: "140000", name: "山西省" },
        { adcode: "150000", name: "内蒙古自治区" },

        { adcode: "210000", name: "辽宁省" },
        { adcode: "220000", name: "吉林省" },
        { adcode: "230000", name: "黑龙江省" },

        { adcode: "310000", name: "上海市" },
        { adcode: "320000", name: "江苏省" },
        { adcode: "330000", name: "浙江省" },
        { adcode: "340000", name: "安徽省" },
        { adcode: "350000", name: "福建省" },
        { adcode: "360000", name: "江西省" },
        { adcode: "370000", name: "山东省" },

        { adcode: "410000", name: "河南省" },
        { adcode: "420000", name: "湖北省" },
        { adcode: "430000", name: "湖南省" },
        { adcode: "440000", name: "广东省" },
        { adcode: "450000", name: "广西壮族自治区" },
        { adcode: "460000", name: "海南省" },

        { adcode: "500000", name: "重庆市" },
        { adcode: "510000", name: "四川省" },
        { adcode: "520000", name: "贵州省" },
        { adcode: "530000", name: "云南省" },
        { adcode: "540000", name: "西藏自治区" },

        { adcode: "610000", name: "陕西省" },
        { adcode: "620000", name: "甘肃省" },
        { adcode: "630000", name: "青海省" },
        { adcode: "640000", name: "宁夏回族自治区" },
        { adcode: "650000", name: "新疆维吾尔自治区" },

        { adcode: "710000", name: "台湾省" },
        { adcode: "810000", name: "香港特别行政区" },
        { adcode: "820000", name: "澳门特别行政区" },
      ],
      adcodeList: [],
      // 查询参数
      queryParams: {
        LngLat: "", //经纬度
        Base: "", //基站信息
      },

      TimePeriod: [
        {
          value: "按日查询",
          label: "按日查询",
        },
        {
          value: "按周查询",
          label: "按周查询",
        },
        {
          value: "按月查询",
          label: "按月查询",
        },
      ],
      timeValue: "按日查询", //动销事件周期
      passengerperiod: "按日查询", //客流趋势周期

      //再投设备开机率
      deviceBootRate: {
        color: ["#165DFF", "#14C9C9"],
        title: {
          text: "在投设备开机率",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 14,
            color: "#35404F",
            left: "0%",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: { right: "0%", data: ["开机设备数量", "开机占比"] }, //颜色渐变
        grid: {
          top: "20%",
          left: "0%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "2024/3/15",
              "2024/3/16",
              "2024/3/17",
              "2024/3/18",
              "2024/3/19",
              "2024/3/20",
              "2024/3/21",
            ],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },

            //max: 100
          },
        ],
        yAxis: [
          {
            type: "value",
            //name: 'sell',
            min: 0,
            max: 15,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                //show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
          {
            type: "value",
            //name: 'persent',
            min: 0,
            max: 100,
            axisLabel: {
              color: "#8C8C8C",
              formatter: "{value}%",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                //show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            // axisLabel: {
            //   formatter: '{value} °C'
            // }
          },
        ],
        series: [
          {
            name: "开机设备数量",
            type: "bar",
            data: [15, 12, 10, 8, 6, 7, 4],
            barWidth: 20,
            barGap: "0%",
            animationDuration: 4000,
            animationEasing: "cubicInOut",
            // barCategoryGap: '1%'
          },
          {
            name: "开机占比",
            lineStyle: {
              color: "#14C9C9",
            },
            yAxisIndex: 1,
            type: "line",
            data: [80, 90, 40, 20, 70, 50, 80],
            barWidth: 20,
            animationDuration: 4000,
            animationEasing: "cubicInOut",
          },
        ],
      },

      //渠道分布
      channelDistribution: {
        color: "#165DFF",
        title: {
          text: "渠道分布",
          left: "left",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 14,
            color: "#35404F",
            fontSyle: "normal",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        label: {
          show: false,
          position: "top",
        },
        // legend: { y: 'bottom', data: ['销量', '牌面位', '卖力'] },
        grid: {
          left: "15%",
          right: "3%",
          bottom: "0%",
          top: "20%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              interval: "auto",
              // formatter: "{value}%",
              textStyle: {
                color: "#8C8C8C",
              },
            },
            axisLine: {
              show: false,

              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                //show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
        yAxis: [
          {
            type: "category",
            data: ["商超", "食杂店", "园区", "便利店", "餐饮"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
          },
        ],
        series: [
          {
            data: [8000, 5000, 3000, 9000, 2000],
            type: "bar",
            barWidth: 10,
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              barBorderRadius: [0, 5, 5, 0],
            },
          },
        ],
      },
      //陈列不合格类型分析
      failureType: {
        color: ["#165DFF", "#2EC021", "#FF8800"],
        title: {
          text: "陈列不合格类型分析（%）",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 14,
            color: "#35404F",
            fontSyle: "normal",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        label: {
          show: true,
          position: "top",
          //formatter: "{c}%",
        },
        // legend: { y: "top", data: ["数量", "占比"] },
        grid: {
          left: "5%",
          right: "2%",
          bottom: "13%",
          top: "25%",
          //containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [
              "纯净度",
              "黄金位纯度",
              "必铺品占比",
              "竞品占比",
              "空置占比",
            ],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },

            //max: 100
          },
        ],
        yAxis: [
          {
            type: "value",
            //name: 'sell',
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisLabel: {
              formatter: "{value}%",
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                //show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            data: [20, 17, 24, 26, 14],
            barWidth: 20,
            barGap: "0%",
            animationDuration: 4000,
            animationEasing: "cubicInOut",
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              barBorderRadius: [5, 5, 0, 0],
            },

            // barCategoryGap: '1%'
          },
        ],
      },
      //动销分析
      sellingAnalysis: {
        title: {
          text: "动销分析",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 18,
            color: "#333333",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter:
            "{b0}<br />{a0} : {c0}%<br/>{a1} : {c1}%<br/>{a2} : {c2}%<br/>{a3} : {c3}%",
        },
        legend: { y: "top", data: ["汽水", "水类", "奶类", "果汁", "功能"] },
        grid: {
          left: "40px",
          right: "10px",
          bottom: "25px",
          top: "20%",
        },
        xAxis: {
          show: true,
          data: [
            "1月1日",
            "1月2日",
            "1月3日",
            "1月4日",
            "1月5日",
            "1月6日",
            "1月7日",
          ],
          axisPointer: {
            type: "shadow",
          },
          axisLine: {
            lineStyle: {
              color: "#8C8C8C", //坐标轴的颜色
            },
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#8C8C8C",
            },
          },
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "#8C8C8C", //坐标轴的颜色
            },
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#8C8C8C",
            },
            interval: "auto",
            formatter: "{value}%",
          },
          splitLine: {
            show: true,
            lineStyle: {
              //show: false,
              type: "dashed",
              color: "#DFDFDF",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "汽水",
            type: "bar",
            stack: "堆叠", //相同的stack开启堆叠
            data: [5, 10, 15, 20, 25, 30, 35],
            barWidth: 30, //柱子宽度
            itemStyle: {
              normal: { color: "#6474FF" },
            },
          },
          {
            name: "水类",
            type: "bar",
            stack: "堆叠", //相同的stack开启堆叠
            data: [20, 20, 20, 20, 20, 20, 20],
            barWidth: 30, //柱子宽度
            itemStyle: {
              normal: { color: "#8390FF" },
            },
          },
          {
            name: "奶类",
            type: "bar",
            stack: "堆叠", //相同的stack开启堆叠
            data: [10, 20, 30, 30, 20, 10, 20],
            barWidth: 30, //柱子宽度
            itemStyle: {
              normal: { color: "#A2ACFF" },
            },
          },
          {
            name: "果汁",
            type: "bar",
            stack: "堆叠", //相同的stack开启堆叠
            data: [35, 30, 25, 20, 15, 10, 5],
            barWidth: 30, //柱子宽度
            itemStyle: {
              normal: { color: "#C1C7FF" },
            },
          },
          {
            name: "功能",
            type: "bar",
            stack: "堆叠", //相同的stack开启堆叠
            data: [30, 20, 10, 10, 20, 30, 20],
            barWidth: 30, //柱子宽度
            itemStyle: {
              normal: { color: "#E0E3FF" },
            },
          },
        ],
      },
      //客流趋势
      flowerTender: {
        color: ["#165DFF", "#3EC67D"],
        // title: {
        //   text: "客流趋势（人次）",
        //   textStyle: {
        //     fontFamily: "HarmonyOS_Sans_SC_Medium",
        //     fontSize: 18,
        //     color: "#333333",
        //     fontWeight: "normal",
        //   },
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // label: {
        //   show: true,
        //   position: 'top'
        // },
        legend: { y: "15%", right: "0%", data: ["客流量", "开关门次数"] }, //颜色渐变
        grid: {
          left: "5%",
          right: "3%",
          bottom: "13%",
          top: "30%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["7日", "8日", "9日", "10日", "11日", "12日", "13日"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                //show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
        series: [
          {
            name: "客流量",
            type: "line",
            //stack: 'Total',
            smooth: true,
            lineStyle: {
              //width: 0
              color: "#3EC67D",
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(20, 201, 201, 0.2)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(20, 201, 201, 0)", // 100% 处的颜色
                  },
                ],
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [190, 210, 130, 410, 750, 130, 810],
          },
          {
            name: "开关门次数",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              //width: 0
              color: "#6474FF",
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(22, 93, 255, 0.2)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(22, 93, 255, 0)", // 100% 处的颜色
                  },
                ],
              },
            },
            data: [130, 282, 680, 450, 780, 900, 810],
          },
        ],
      },
      //消息中心
      scrollBoard: {
        //header: ['<span style="color:#000000;">编号</span>', '<span style="color:#000000;">商品</span>', '<span style="color:#000000;">数量/瓶</span>', '<span style="color:#000000;">位置/层</span>'],
        //headerBGC: '#ffffff',
        oddRowBGC: "#ffffff",
        evenRowBGC: "#ffffff",
        rowNum: 5,
        columnWidth: [600, 90],
        hoverPause: true,
        align: ["left", "left", "right"],
        data: [
          [
            '<span style="color:#FF6464;font-family: HarmonyOS_Sans_SC_Regular;">异常检测：</span>冰柜非法移动',
            "08/28",
          ],
          [
            '<span style="color:#45C881;font-family: HarmonyOS_Sans_SC_Regular;">优化建议：</span>近期高温，建议设置',
            "08/28",
          ],
          [
            '<span style="color:#FF6464;font-family: HarmonyOS_Sans_SC_Regular;">异常检测：</span>冰柜非法移动',
            "08/28",
          ],
          [
            '<span style="color:#FF6464;font-family: HarmonyOS_Sans_SC_Regular;">运营状态：</span>冰柜非法移动',
            "08/28",
          ],
          [
            '<span style="color:#6A7AFF;font-family: HarmonyOS_Sans_SC_Regular;">运营状态：</span>冰柜非法移动',
            "08/28",
          ],
          [
            '<span style="color:#45C881;font-family: HarmonyOS_Sans_SC_Regular;">优化建议：</span>近期高温，建议设置',
            "08/28",
          ],
          [
            '<span style="color:#FF6464;font-family: HarmonyOS_Sans_SC_Regular;">异常检测：</span>冰柜非法移动',
            "08/28",
          ],
          [
            '<span style="color:#FF6464;font-family: HarmonyOS_Sans_SC_Regular;">运营状态：</span>冰柜非法移动',
            "08/28",
          ],
          [
            '<span style="color:#6A7AFF;font-family: HarmonyOS_Sans_SC_Regular;">运营状态：</span>冰柜非法移动',
            "08/28",
          ],
        ],
      },
      data: [
        { value: 600, name: "投放中" },
        { value: 800, name: "待分配" },
        { value: 400, name: "待投放" },
        { value: 400, name: "待检修" },
      ],
      //资产总数
      assetsTotal: {
        color: ["#165DFF", "#14C9C9", "#F7BA1E", "#722ED1"],
        title: {
          text: "资产总数",
          left: "left",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 14,
            color: "#35404F",
            fontSyle: "normal",
            fontWeight: "normal",
          },
        },
        // tooltip: {
        //   trigger: "item",
        // },
        legend: {
          orient: "vertical",
          //icon: "circle",
          itemHeight: 10, // 修改icon图形大小
          itemWidth: 15,
          right: "5%",
          bottom: "0%",
          textStyle: {
            color: "#8593A7",
            fontSize: 12,
          },
          formatter: function (name) {
            // 添加
            let total = 0;
            let target;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            var arr = [name + "：" + target];
            return arr.join("  ");
          },
        },
        series: [
          {
            //name: 'Access From',
            type: "pie",
            radius: "78%",
            label: {
              show: true,
              position: "inner",
              formatter: "{d}%",
              color: "#fff",
            },
            center: ["32%", "55%"],
            data: [
              { value: 600, name: "投放中" },
              { value: 600, name: "待分配" },
              { value: 400, name: "待投放" },
              { value: 400, name: "待检修" },
            ],
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0, 0, 0, 0.5)",
            //   },
            // },
          },
        ],
      },
    };
  },
  mounted() {
    this.getDataView();
  },

  beforeDestroy() {},
  methods: {
    getFactoryStatusCount() {
      // getfactoryStatus().then((res) => {
      //   this.factoryStatusCount = res.data
      //   console.log('this.factoryStatusCount', this.factoryStatusCount);
      // })
    },
    /**初始化 */
    init() {
      // this.getFactoryStatusCount()
      // console.log('开始绘制表格');
      // //绘制表格上的线
      // var line0 = document.getElementById('line0')
      // var total = 0;
      // this.deviceDistribution.series.forEach((item, index) => {
      //   total += item.data[0].value;
      // })
      // var lineleft0 = ((this.deviceDistribution.series[0].data[0].value / total) * 100).toFixed(0) / 2
      // line0.style.left= lineleft0+'%'

      var chartDom = document.getElementById("chart0");
      var assetsTotalChart = this.$echarts.init(chartDom);
      assetsTotalChart.setOption(this.assetsTotal);

      var chartDom = document.getElementById("chart1");
      var channelDistributionChart = this.$echarts.init(chartDom);
      channelDistributionChart.setOption(this.channelDistribution);

      var chartDom = document.getElementById("chart3");
      var deviceBootRateChart = this.$echarts.init(chartDom);
      deviceBootRateChart.setOption(this.deviceBootRate);

      // var chartDom = document.getElementById("chart2");
      // var sellingAnalysisChart = this.$echarts.init(chartDom);
      // sellingAnalysisChart.setOption(this.sellingAnalysis);

      var chartDom = document.getElementById("chart4");
      var failureTypeChart = this.$echarts.init(chartDom);
      failureTypeChart.setOption(this.failureType);

      var chartDom = document.getElementById("chart5");
      var flowerTenderChart = this.$echarts.init(chartDom);
      flowerTenderChart.setOption(this.flowerTender);
      window.onresize = () => {
        assetsTotalChart.resize();
        channelDistributionChart.resize();
        // sellingAnalysisChart.resize();
        flowerTenderChart.resize();
        deviceBootRateChart.resize();
        failureTypeChart.resize();
      };
      //去除高德logo和版权

      window.onload = function () {
        console.log(document.getElementsByClassName("amap-logo")[0]);
        document.getElementsByClassName("amap-logo")[0].remove();
        document.getElementsByClassName("amap-copyright")[0].remove();
      };
    },
    getColorByDGP(adcode) {
      if (!colors[adcode]) {
        var gdp = GDPSpeed[adcode];
        if (!gdp) {
          colors[adcode] = "rgb(227,227,227)";
        } else {
          var rg = 255 - Math.floor(((gdp - 5) / 5) * 255);
          colors[adcode] = "rgb(" + rg + "," + rg + ",255)";
        }
      }
      return colors[adcode];
    },
    getDataView() {
      // this.adcodeList = []
      // // 获取大屏数据
      // dataView({
      //   // userId: this.customerID,
      //   userId: this.$store.state.user.id
      // })
      //   .then((res) => {
      //     console.log('## dataView ==> ', res)
      //     const { } = res.data
      //     this.mainData = res.data
      //     this.adcode.map((item1) => {
      //       this.mainData.provinceList.map((item2) => {
      //         if (item1.name == item2.province)
      //           this.adcodeList.push(item1.adcode)
      //       })
      //     })
      //   })
      //   .catch((err) => {
      //     this.$message.error(err.message)
      //     console.log('## err', err)
      //   }).finally(() => {
      this.initAMap();
      this.init();
      //   })
    },
    initAMap() {
      AMapLoader.load({
        key: "fdf3c1227382941015a1295cafb4d0a7", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ControlBar",
          "AMap.HawkEye",
          "AMap.ToolBar",
          "AMap.CitySearch",
          "AMap.Geocoder",
          "AMap.MapType",
          "AMap.DistrictSearch",
          "AMap.Polygon",
          "AMap.DistrictLayer",
          "AMap.Pixel",
          "AMap.InfoWindow",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 注册容器
          this.map = new AMap.Map("mapContainer", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 4, // 初始化地图级别
            resizeEnable: true,
            center: [108.5525, 34.3227], // 初始化地图中心点位置
          });

          var disCountry = new AMap.DistrictLayer.Country({
            zIndex: 10,
            //adcode: ['520000', '540000', '530000', '500000', '360000', '340000', '510000', '350000', '430000'],
            //SOC: 'CHN',
            adcode: this.adcodeList,
            depth: 0,
            styles: {
              "nation-stroke": "#f09",
              //'coastline-stroke': [0.85, 0.63, 0.94, 1],
              "province-stroke": "rgb(255,255,255)", //省边界颜色
              "city-stroke": "rgb(255,255,255)", //市边界颜色
              fill: "rgba(100, 116, 255, 0.2)",
            },
          });
          disCountry.setMap(this.map);
          var infoWin = new AMap.InfoWindow({
            closeWhenClickMap: true,
          });
          disCountry.on("click", (ev) => {
            console.log("ev", ev);
            var originalEv = ev.origin.originEvent;
            console.log("clientx", originalEv.clientX, originalEv.clientY);
            var lnglat = this.map.containerToLngLat(
              new AMap.Pixel(originalEv.clientX - 260, originalEv.clientY - 380)
            ); //坐标有偏移手动修正 -90
            var feature = ev.feature;
            var value = ev.value;
            var property = ev.props.NAME_CHN;
            console.log("property", property);
            infoWin.open(this.map, lnglat);
            console.log("lnglat", lnglat);

            var content = [
              property,
              "<br>",
              "设备数量：",
              "<br>",
              //+this.deviceNum(property)
              "当前在线：",
            ];
            infoWin.setContent(content.join(""));
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    deviceNum(p) {
      var num = 0;
      this.mainData.provinceList.map((item) => {
        if (item.province == p) num = item.count;
      });
      return num;
    },
  },
};
</script>

<style lang="scss" scoped>
.data-center-main {
  background-color: #f3f3f3;
  width: 100%;
  height: calc(100vh - 85px);
  display: flex;
  padding: 1%;
}

.titleFont {
  /* 资产数据概览 */
  font-family: HarmonyOS_Sans_SC_Regular;
  color: #35404f;
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  display: flex;
  align-items: center;
}

.leftpart {
  width: 45%;
  border-radius: 4px;
  height: 100%;
  padding-top: 1%;
  padding-right: 1%;
  padding-left: 1%;
}

.leftTop {
  position: relative;
  height: 32%;
  margin-bottom: 1%;
  display: flex;
  flex-direction: column;
  //padding: 10px;
  //border: solid 1px blue;
}

.leftMid {
  position: relative;
  height: 40%;
  // border-radius: 10px;
  // margin-top: -30px;
  margin-bottom: 1%;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.leftBot {
  //border-top: 1px solid rgba(0, 0, 0, 0.06);
  height: 25%;
  padding-top: 10px;
  position: relative;
}

.dot {
  height: 10px;
  width: 10px;
  background-color: #ccc;
  border-radius: 50%;
}

.status {
  z-index: 600;
  width: 150px;
  height: 150px;
  position: absolute;
  left: 8px;
  bottom: 25px;
  border-radius: 8px;
  padding: 10px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.rightpart {
  width: 54%;
  height: 100%;
  border-radius: 4px;
  margin-left: 1%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rightOne {
  padding: 10px;
  width: 100%;
  height: 45%;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
}

.rightTop {
  width: 24%;
  height: 100%;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0px 0px 2px 0px rgba(31, 45, 61, 0.3);

  flex-direction: column;
  display: flex;
  justify-content: space-between;
}

.rightTwo {
  width: 100%;
  height: 25%;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  background-color: white;
  // display: flex;
  // justify-content: space-between;
}

.rightThree {
  width: 100%;
  height: 25%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: white;
  justify-content: space-between;
  position: relative;
}

.rightFour {
  width: 100%;
  height: 25%;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
}

.chart {
  width: 49.5%;

  height: 100%;
  border-radius: 4px;
  padding: 10px;
  position: relative;
}

.classifyFont {
  display: flex;
  justify-content: space-between;
  color: #8c8c8c;
  font-size:calc(10vw * 100 / 1920); 
}
</style>
